<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="vue-line-chart">
      <svg width="960" height="500"></svg>
    </div>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="./data.js"></script>
    <script>
      const app = new Vue({
        el: "#vue-line-chart",
        methods: {
          calculatePath() {
            // const d3 = this.$d3
            var svg = d3.select("#vue-line-chart>svg");
            var margin = { top: 20, right: 20, bottom: 30, left: 50 };
            var width = +svg.attr("width") - margin.left - margin.right;
            var height = +svg.attr("height") - margin.top - margin.bottom;
            var g = svg
              .append("g")
              .attr(
                "transform",
                "translate(" + margin.left + "," + margin.top + ")"
              );

            var parseTime = d3.timeParse("%d-%b-%y");

            var x = d3.scaleTime().rangeRound([0, width]);

            var y = d3.scaleLinear().rangeRound([height, 0]);

            var line = d3
              .line()
              .x(function (d) {
                return x(d.date);
              })
              .y(function (d) {
                return y(d.close);
              });
            // console.log(require('./data.csv')) *** 无法加载csv文件
            const data = [];
            _data.forEach((e) => {
              const arr = e.split(",");
              const obj = {
                date: parseTime(arr[0]),
                close: +arr[1],
              };
              data.push(obj);
            });
            console.log(svg, margin, width, height, x, y);
            console.log(_data, data);
            x.domain(
              d3.extent(data, function (d) {
                return d.date;
              })
            );
            y.domain(
              d3.extent(data, function (d) {
                return d.close;
              })
            );

            g.append("g")
              .attr("transform", "translate(0," + height + ")")
              .call(d3.axisBottom(x))
              .select(".domain");
            // .remove();

            g.append("g")
              .call(d3.axisLeft(y))
              .append("text")
              .attr("fill", "#000")
              .attr("transform", "rotate(-90)")
              .attr("y", 6)
              .attr("dy", "0.71em")
              .attr("text-anchor", "end")
              .text("Price ($)");

            g.append("path")
              .datum(data)
              .attr("fill", "none")
              .attr("stroke", "steelblue")
              .attr("stroke-linejoin", "round")
              .attr("stroke-linecap", "round")
              .attr("stroke-width", 1.5)
              .attr("d", line);
          },
        },
        mounted() {
          this.calculatePath();
        },
      });
    </script>
  </body>
</html>
